<template>
  <div class="login_container">
    <div class="login_box">
      <h3 style="text-align:center">欢迎登录</h3>
      <div class="avatar_box">
        <img src="../assets/logo.png" width="100px" height="100px" />
      </div>
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="0px"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            prefix-icon="el-icon-user-solid"
            placeholder="请输入账号"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            prefix-icon="el-icon-unlock"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="seccode" class="inputbar">
          <el-input
            class="log-input"
            v-model="ruleForm.seccode"
            placeholder="请输入验证码"
            prefix-icon="el-icon-key"
            @keydown.enter.native="login('ruleForm')"
          ></el-input>
          
          <span class="checkCode" >{{ checkCode}}</span>
          <span @click="createCode" class="checkCode1">点击更换</span>
         
         
        </el-form-item>
        <el-form-item class="btns">
          <el-button type="primary" @click="Login()">登录</el-button>
          <el-button type="info" @click="resetLogin()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      ruleForm: {
        username: "admin",
        password: "123456",
        seccode: ""
      },
       checkCode:'',
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 5, max: 10, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        seccode: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      }
    };
  },
  mounted () {
    this.createCode();
  },
  methods: {
    resetLogin() {
      this.$refs.ruleForm.resetFields();
    },
    createCode() {
		let code = "";
		const codeLength = 4; //验证码的长度  
		const random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
			'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'); //随机数  
		for(let i = 0; i < codeLength; i++) { //循环操作  
			let index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）  
			code += random[index]; //根据索引取得随机数加到code上  
		}
		this.checkCode = code; //把code值赋给验证码  
	},
    Login() {
      if(this.ruleForm.seccode != this.checkCode) {
         this.$message({
              message: "验证码错误，注意大写字母以及是否输入正确",
              type: "warning"
        });
        this.createCode();
        return false;
      };
      this.$refs.ruleForm.validate(async valid => {
        if (valid) {
          const { data: res } = await this.$http.post("/login", this.ruleForm);
          if (res.flag == "ok") {
            window.sessionStorage.setItem("user", res.users); //users对象
            this.$message.success("登录成功");
            this.$router.push({ path: "/home" });
          } else {
            this.$message.error("用户名或密码错误");
            return false;
          }
        }
      });
    },
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
    }
  }
};
</script>
<style scoped>
.login_container {
  background-image:url("../assets/login-background.jpg");
  background-size:100%;
  width: 100%;
  height: 100%;
}
.login_box {
  width: 450px;
  height: 400px;
  background: rgba(0, 0, 0, 0.6);
  /*border-radius: 3px;
    position:absolute; */
  /* margin:0px auto; */
  border: 1px solid #eaeaea;
  padding: 0px 10px 10px 10px;
  border-radius: 15px;
  box-shadow: 0 0 25px #cac6c6;
  position: absolute;
  top: 100px;
  left: 450px;
}
.avatar_box {
  text-align: center;
  height: 100px;
}
.btns {
  margin-top: -20px;
  text-align: center;
}
.log-input{
  width: 200px
}
.checkCode{
  border: 1px solid #fce5cd;
  display: inline-block;
  margin: 0px 0 10px 20px;
  padding: 0 10px 0 10px;
  font-style: italic;
  color: #6d9eeb;
  border-radius: 5px
  
}
.checkCode1{
  border: 1px solid burlywood;
  color: #6d9eeb;
  padding:2px;
  cursor: pointer;
  border-radius: 5px;
}
</style>